{% extends "tj3/base.html" %}

{% block navigation %}
<script type="text/javascript">
	function changeType(series, newType) {
	
		for (var i=0; i<series.length;i++)
		{
			serie=series[0];
			serie.chart.addSeries({
				type:newType,
				name: serie.name,
				color: serie.color,
				data: serie.options.data
			},false);
			serie.remove();
		}
	}

	$(document).ready(function(){
		var options = {
			chart: {
				renderTo: 'container',
				defaultSeriesType: 'bar',
				type: 'column'
			},
			
			title: {
				text: 'Title'
			},
			
			xAxis:{
				categories: []
			},
			
			yAxis: {
				title: {
					text: "Units"
				}
			},
			series: []
		};


	$.get("{% url graph %}",function(data) {
		// Split the lines
		var lines=data.split('\n');

		// Iterate over the lines and add categories
		$.each(lines, function(lineNo,line){
			var items=line.split(',');
					
			// header line contains categories
			if (lineNo==0) {
				$.each(items,function(itemNo,item){
					if (itemNo>0) options.xAxis.categories.push(item);
				});
			} else {
				// Iterate over the lines and add categories or series
				var series = { name:'', data:[] };
			
				$.each(items,function(itemNo,item){
					if (itemNo==0){
						series.name=item;
					} else {
						series.data.push(parseFloat(item));
					}
				});			
				options.series.push(series);
			}
		});	

		var chart=new Highcharts.Chart(options);
		$('#data').html(data);	

		$('#line').click(function(){
			changeType(chart.series,'line');
		});
		$('#bar').click(function(){
			changeType(chart.series,'bar');
		});
		$('#column').click(function(){
			changeType(chart.series,'column');
		});
		$('#area').click(function(){
			changeType(chart.series,'areaspline');
		});
		$('#pie').click(function(){
			changeType(chart.series,'pie');
		});
		$('#scatter').click(function(){
			changeType(chart.series,'scatter');
		});
		$('#spline').click(function(){
			changeType(chart.series,'spline');
		});
	});

});
</script>

{% endblock navigation %}

{% block content %}
<a href="{% url comment %}">Back To Comment</a>

<button id="bar">Bar</button>
<button id="line">Line</button>
<button id="spline">Spline</button>
<button id='area'>Areaspline</button>
<button id='column'>Column</button>
<button id='pie'>Pie</button>
<button id='scatter'>Scatter</button>


<div id='container' style='width: 800px; 
height: 500px; margin: 0 auto'></div>

<h1>Data Source</h2>
<div id="data"></div>


{% endblock content %}
